<!DOCTYPE html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <title>Selector</title>
  <script src="../platform/platform.js"></script>
  <link rel="import" href="core-selector.html">
</head>
<body unresolved>
  <polymer-element name="selector-examples">
    <template>
      <style>
        .list {
          display: block;
          border: 1px solid #ccc;
          border-bottom: none;
          background: #666;
          color: white;
          list-style: none;
          margin: 0;
          padding: 0;
        }
        
        .list > * {
          height: 40px;
          line-height: 40px;
          padding: 0 20px;
          border-bottom: 1px solid #ccc;
        }
        
        .list > *.core-selected {
          background: #333;
        }
        
        li {
          height: 30px;
        }
        
        li.core-selected:after {
          content: "\2713";
          position: absolute;
          padding-left: 10px;
        }
      </style>
      
      <h2>basic</h2>
      <core-selector class="list" selected="0">
        <div>Item 0</div>
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
      </core-selector>
      
      <h2>multi-selection</h2>
      <core-selector class="list" selected="{{multiSelected}}" multi>
        <div>Item 0</div>
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
      </core-selector>
      
      <h2>list</h2>
      <core-selector target="{{$.list}}" selected="0"></core-selector>
      <ul id="list">
        <li>Item 0</li>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
      
      <h2>binding of a group of radio buttons to a variable</h2>
      <core-selector target="{{$.myForm}}" itemsSelector="input[type=radio]" 
          selected="{{color}}" valueattr="value" selectedProperty="checked" 
          activateEvent="change"></core-selector>
      <form id="myForm">
        <label><input type="radio" name="color" value="red"> Red</label> <br>
        <label><input type="radio" name="color" value="green"> Green</label> <br>
        <label><input type="radio" name="color" value="blue"> Blue</label> <br>
        <p>color = {{color}}</p>
      </form>
      
    </template>

    <script>
      Polymer('selector-examples', {
        ready: function() {
          this.multiSelected = [1, 3];
          this.color = 'green';
        }
      });
    </script>
  </polymer-element>
  
  <selector-examples></selector-examples>
</body>
</html>
